<div style="width: 80%; margin-left: 15px;">
  <div class="edit-top">
      <span>{{project.name}}项目的任务分解表</span>
       <label (click)="updateProject()">编辑</label>
      <img src="assets/images/+.png" (click)="createTask()"/>
  </div>
  <div>
    <table class="context_col">
            <thead>
                 <tr>
                     <td style="width: 5%">序号</td>
                     <td style="width: 25%">任务分解表</td>
                     <td>时间段</td>
                     <td style="width: 6%">状态描述</td>
                 </tr>
             </thead>
            <tbody>
                <tr *ngFor="let task of tasks; let i = index">
                    <td>{{ i+1}}</td>
                    <td>
                        <p>{{task.name}}</p>
                        <p>工时：{{task.hours + task.ot_hours}}</p>
                    </td>
                    <td>
                       <div class="time-line">
                       <div style="width: 100%; overflow: hidden; height: 100%;">
                         <div class= "time-line-line">
                          <div class="time-line-line-red" [ngStyle]="{'left': task.s_width + '%', 'width': task.s_e_width + '%'}"></div>
                           <div class="line-origin task-style">{{top_date.replace('-', "")}}</div>
                           <div *ngIf="task.s_width >0 " class="line-start" [ngStyle]="{'left': task.s_width + '%'}"><i></i><span class="task-style">{{task.s_date.replace('-', "")}}</span></div>
                           <div class="line-center"><i></i></div>
                           <div *ngFor="let milestone of task.milestones">
                             <div class="line-current" [ngStyle]="{'left': milestone.l_width + '%'}"><i></i><span class="task-style">{{milestone.date.replace('-', "")}}</span></div>
                           </div>
                           <div *ngIf="task.e_width < 100" class="line-over" [ngStyle]="{'left': task.e_width + '%'}"><i></i><span class="task-style">{{task.e_date.replace('-', "")}}</span></div>
                           <div class="line-end task-style">{{bottom_date.replace('-', "")}}</div>
                         </div>
                         </div>
                       </div>
                     </td>
                    <td>
                        <div class="sty sty1" (click)="updateTask(task.id)">
                            <i></i>
                            <div class="clear"></div>
                            编辑
                        </div>
                    </td>
                </tr>
            </tbody>
     </table>
  </div>
</div>

<div class="mask" *ngIf="projectShowed">
  <div class="project-opendiv">
    <div class="new-plan">
      <span>添加项目</span>
      <img src="assets/images/x.png" (click)="projectShowed = !projectShowed" />
    </div>
    <div class="project-form">
    <table style="border-spacing:10px 10px">
      <tr>
        <td>项目类型</td>
        <td colspan="3">
        <select [(ngModel)]="project.type_id" >
            <option *ngFor="let type of types" [value]="type.id">{{type.name}}</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>项目负责人</td>
        <td>
        <select [(ngModel)]="project.leader_id">
            <option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>
          </select>
          </td>
        <td>项目需求方</td>
        <td>
        <select [(ngModel)]="project.demander_id">
            <option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>
          </select>
        </td>
      </tr>
      <tr>
          <td>项目名称</td>
          <td colspan="3"><input [(ngModel)]="project.name" type="text"></td>
      </tr>
      <tr>
        <td>项目描述</td>
          <td colspan="3"><textarea [(ngModel)]="project.desc"></textarea></td>
      </tr>
      <tr>
          <td>项目重要度</td>
          <td><input [(ngModel)]="project.importance" type="text"></td>
          <td>项目优先级</td>
          <td><input [(ngModel)]="project.priority" type="text"></td>
      </tr>
      <tr>
          <td>项目开始时间</td>
          <td><input [(ngModel)]="project.s_date" mdInput type="date" ></td>
          <td>项目结束时间</td>
          <td><input [(ngModel)]="project.e_date" mdInput type="date"></td>
      </tr>
      </table>
        <table style="border-spacing:10px 10px">
       <tr><td><button (click)="add()">添加</button></td></tr>
        <tr *ngFor="let milestone of project.milestones_attributes;let i = index">
          <td rolspan="10">添加里程碑</td>
          <td><input [(ngModel)]="milestone.title" type="text"></td>
          <td><input [(ngModel)]="milestone.date" mdInput type="date" ></td>
          <td><button (click)="delete(i,milestone.id)">删除</button></td>
      </tr>
      </table>
      <div class="submit">
          <i class="save" (click)="submit()"></i>
          <i class="cancel" (click)="projectShowed = !projectShowed"></i>
      </div>
     </div>
  </div>
</div>


<div class="mask" *ngIf="taskShowed">
  <div class="project-opendiv">
    <div class="new-plan">
      <span>添加任务/编辑任务</span>
      <img src="assets/images/x.png" (click)="taskShowed = !taskShowed" />
    </div>
    <div class="project-form">
    <table style="border-spacing:10px 10px">
       <tr>
          <td>任务名称</td>
          <td colspan="3"><input [(ngModel)]="task.name" type="text"></td>
      </tr> 
      <tr>
        <td>任务所属阶段</td>
        <td><select [(ngModel)]="task.stage_id">
            <option *ngFor="let stage of stages" [value]="stage.id">{{stage.name}}</option>
          </select>
          </td>
        <td>任务接受人</td>
        <td><select [(ngModel)]="task.receiver_id">
            <option *ngFor="let user of users" [value]="user.id" >{{user.name}}</option>
          </select>
          </td>
      </tr>
      <tr>
        <td>任务描述</td>
          <td colspan="3"><textarea [(ngModel)]="task.desc"></textarea></td>
      </tr>
      <tr>
          <td>任务开始时间</td>
          <td><input [(ngModel)]="task.s_date" mdInput type="date" ></td>
          <td>任务结束时间</td>
          <td><input [(ngModel)]="task.e_date" mdInput type="date"></td>
      </tr>
      <tr>
          <td>任务工时</td>
          <td><input [(ngModel)]="task.hours" type="text"></td>
          <td>加班工时</td>
          <td><input [(ngModel)]="task.ot_hours" type="text"></td>
      </tr>
      </table>

      <div class="submit">
          <i class="save" (click)="task_submit()"></i>
          <i class="cancel" (click)="taskShowed = !taskShowed"></i>
      </div>
     </div>
  </div>
</div>

